<script setup lang="ts">
  import { PropType, watch, ref } from "vue";
  import { ElForm, ElFormItem, FormInstance } from "element-plus";
  import stockLog from "./stockLog.vue";
  const
    props = defineProps({
      modelValue: { type: Object as PropType<gt.sql.stock>, default: format.def.stock, },
      disabled: { type: Boolean, default: false }
    }),
    rules = ref({
      name: { required: true, message: "名称2-20个字符", trigger: "blur", min: 2, max: 20, },
      gid: { required: true, message: "请选择分组", trigger: "blur", },
      goods: { required: true, message: "请选择商品", trigger: "blur", },
    }),
    refreshGoods = ref(0),
    groupTree = ref<Tree<gt.sql.group>>([]),
    opt = ref({
      expandTrigger: "hover",
      checkStrictly: true,
      emitPath: false,
      value: "id",
      label: "name"
    }),
    // optGoods = { value: "id", label: "name", checkStrictly: true, emitPath: false },
    optionsGoods = ref<gt.sql.goods[]>([]),
    entity = ref<FormInstance>();
  async function init() {
    groupTree.value = await gd.groupTree;
    setOptionsGoods();
  }
  watch(() => props, init, { immediate: true });
  const o: obj = {};
  async function setOptionsGoods() {
    if (props.disabled) {
      o.id = props.modelValue.goods;
    } else if (props.modelValue.gid) {
      o.notgid = props.modelValue.gid;
    }
    optionsGoods.value = await gd.goods.read(o);
    refreshGoods.value ^= 1;
  }
  async function changeGid() {
    if (!props.modelValue.gid) {
      props.modelValue.gid = "";
    }
    props.modelValue.goods = "";
    setOptionsGoods();
  }
  function changeGoods() {
    if (!props.modelValue.goods) {
      props.modelValue.goods = "";
    }
    if (Array.isArray(props.modelValue.goods)) {
      props.modelValue.goods = props.modelValue.goods[0];
    }
  }
  defineExpose({
    validate() {
      return new Promise<boolean>((resolve) => {
        if (entity.value) {
          entity.value.validate().then(resolve).catch(() => { resolve(false); });
        } else {
          resolve(false);
        }
      });
    },
    resetFields() { entity.value?.resetFields(); }
  });
</script>
<template>
  <ElForm class="stock xw zb" ref="entity" :model="modelValue" :rules="rules" labelWidth="6em">
    <ElFormItem label="id" prop="id"><el-input v-model="modelValue.id" disabled placeholder="系统自动生成" /></ElFormItem>
    <ElFormItem label="创建时间" prop="createTime"><el-input
        :modelValue="modelValue.createTime ? modelValue._createTime : '系统自动生成'" disabled /></ElFormItem>
    <ElFormItem label="商户管理员" prop="wxid"><el-input :modelValue="modelValue._group?._user?.name" placeholder="由系统设置"
        disabled />
    </ElFormItem>
    <ElFormItem label="剩余库存" prop="commission"><el-input :modelValue="modelValue.sum" placeholder="新建时由系统设置为0"
        disabled />
    </ElFormItem>
    <ElFormItem label="隶属分组" prop="gid">
      <el-cascader v-model="modelValue.gid" :options="groupTree" :props="opt" :disabled="disabled" clearable
        collapse-tags-tooltip placeholder="请选择上级" @change="changeGid" />
    </ElFormItem>
    <ElFormItem label="商品名称" prop="goods" :key="refreshGoods">
      <!-- <el-cascader :key="modelValue.goods" v-model="modelValue.goods" :props="optGoods" :options="optionsGoods"
        :disabled="disabled" collapse-tags-tooltip placeholder="请选择商品" @change="changeGoods" /> -->
      <el-select :key="refreshGoods" v-model="modelValue.goods" aria-placeholder="请选择商品" :disabled="disabled"
        @change="changeGoods">
        <el-option v-for="i in optionsGoods" :key="i.id" :label="i.name" :value="i.id" />
      </el-select>
    </ElFormItem>

    <ElFormItem v-if="disabled" class="wf" label="往来记录" prop="id">
      <stockLog v-model="modelValue.id" :disabled="disabled" class="wf" />
    </ElFormItem>
  </ElForm>
</template>
<style lang="scss" scoped>
  .stock {
    position: relative;
    >:not(.wf) {
      width: 49%;
    }
  }
</style>